<div class="shoping-car-bg" [ngStyle]="tagData.cssStyle | styleFilter">
  <div class="shoping-header" *ngIf="tagData.data.headDiv" appDebounceClick (debounceClick)="closeOpen()">
    <img src="assets/laijian/login_icon_open@3x.png" alt="" *ngIf="isOpen">
    <img src="assets/laijian/login_icon_hide@3x.png" alt="" *ngIf="!isOpen">
    <span *ngIf="!isOpen && tagData.data.headDiv.open?.firstText?.label"
      [ngStyle]="tagData.data.headDiv.open.firstText.cssStyle | styleFilter">{{tagData.data.headDiv.open.firstText.label}}</span>
    <span *ngIf="isOpen && tagData.data.headDiv.close?.firstText?.label"
      [ngStyle]="tagData.data.headDiv.close.firstText.cssStyle | styleFilter">{{tagData.data.headDiv.close.firstText.label}}</span>
  </div>

  <ng-container *ngFor="let item of tagData.data.data, let i = index">
    <div [ngStyle]="item.cssStyle | styleFilter">
      <!-- 分组 -->
      <p class="shopping-type" appDebounceClick (debounceClick)="checkGroupAll($event,item)"
        *ngIf="(i === 0)  || (i > 0 &&  item.type !== tagData.data.data[i-1].type)" [ngStyle]="item?.shoppingTypeCssStyle | styleFilter">
        <i class="unCheck" [ngClass]="{'checked': item.checkedGroup}"></i>
        <ng-container *ngIf="item.showCheckedAllLabel; else elseNormalCheckedGroupTemplate">
          <div class="checked-group-label" [ngStyle]="item?.checkedGroupLabelCssStyle | styleFilter">
            {{item.groupLeftLabel}}{{appGlobalService?.modalCartNum}} {{item.groupRightLabel}}</div>
        </ng-container>
        <ng-template #elseNormalCheckedGroupTemplate>
          {{item.type}}
        </ng-template>
      </p>

      <!-- item -->
      <div class="item-bg" [ngStyle]="item?.itemBgCssStyle | styleFilter">
        <p class="choose-bg" appDebounceClick [ngStyle]="item?.chooseBgCssStyle | styleFilter" (debounceClick)="checkItem($event,item)"><i class="unCheck"
            [ngClass]="{'checked': item.checked}"></i></p>

        <img class="item-img" *ngIf="item.img?.imgUrl" [ngStyle]="item.img?.cssStyle | styleFilter"
          src="{{item.img.imgUrl}}" alt="" appDebounceClick (debounceClick)="openPage(item.link)"
          onerror="onerror=null;src='assets/img/default_rk.png'">
        <div class="item-content-bg" [ngStyle]="item?.contentBgCssStyle | styleFilter">
          <p class="title" *ngIf="item.firstRowLeft?.firstText?.label"
            [ngStyle]="item.firstRowLeft.firstText.cssStyle | styleFilter" appDebounceClick
            (debounceClick)="openPage(item.link,$event)">{{item.firstRowLeft.firstText.label}}</p>
          <p class="class" appDebounceClick (debounceClick)="openPage(item.secondRowLeft.chooseLink?.link,$event,i)"
            *ngIf="item.secondRowLeft?.firstText?.label" [ngStyle]="item.secondRowLeft.firstText.cssStyle | styleFilter">
            <span
              [ngStyle]="item.secondRowLeft.firstText.labelCssStyle | styleFilter">{{item.secondRowLeft.firstText.label}}</span>
            <img [ngStyle]="item.secondRowLeft.firstText.imgCssStyle | styleFilter" class="down"
              *ngIf="item.secondRowLeft?.chooseLink?.link" src="{{item.secondRowLeft.firstText.img}}"
              onerror="this.src='assets/fw/shopping-down.png'" />
          </p>
          
          <div class="s-bg" [ngStyle]="item?.priceBgCssStyle | styleFilter">
            <p class="s-price" appDebounceClick (debounceClick)="openPage(item.link,$event)" [ngStyle]="item.thirdRowLeftCssStyle | styleFilter ">
              <span class="s-unit" *ngIf="item.thirdRowLeft?.firstText?.label"
                [ngStyle]="item.thirdRowLeft.firstText.cssStyle | styleFilter ">{{item.thirdRowLeft.firstText.label}}</span>
              <span *ngIf="item.thirdRowLeft?.secondText?.label"
                [ngStyle]="item.thirdRowLeft.secondText.cssStyle | styleFilter ">{{getInterger(item.thirdRowLeft.secondText.label
                - 0 )| currency:'CNY':'':'1.0-0'}}<i class="pirce-digits">{{(item.thirdRowLeft.secondText.label - 0 |
                  currency:'CNY':'':'0.2-2') + '' | slice:-3}}</i></span>
            </p>

          <ng-container *ngIf="item.thirdRowRight">

            <div class="num-bg" [ngStyle]="item.thirdRowRight?.itemCssStyle | styleFilter" *ngIf="!edit; else showDelete">

              <ng-container
                *ngIf="(item.thirdRowRight?.inputBox?.label > 1 && item.thirdRowRight?.minCount === undefined) || item.thirdRowRight?.inputBox?.label > item.thirdRowRight?.minCount; else elseSubTemplate">
                <img src="assets/fw/sub_black.png" alt="" [ngStyle]="item.thirdRowRight?.subCssStyle | styleFilter"
                  class="sub" appDebounceClick (debounceClick)="sub($event,item.thirdRowRight.submit,item,0,i)">
              </ng-container>
              <ng-template #elseSubTemplate>
                <img src="assets/fw/sub_gray.png" alt="" [ngStyle]="item.thirdRowRight?.subCssStyle | styleFilter"
                  class="sub" appDebounceClick (debounceClick)="sub($event,item.thirdRowRight.submit,item,0,i)">
              </ng-template>

              <ion-input [readonly]="item.thirdRowRight.inventory == 0"
                onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
                [ngStyle]="item.thirdRowRight?.valueCssStyle | styleFilter" (ionChange)="changeValue($event, item)"
                (ionBlur)="inutValue($event, item)" type="number" class="num"
                [(ngModel)]="item.thirdRowRight.inputBox.label"></ion-input>

              <ng-container
                *ngIf="(item.thirdRowRight.inventory *1) > (item.thirdRowRight?.inputBox?.label *1) ; else elseTemplate">
                <img src="assets/fw/add_black.png" alt="" class="add"
                  [ngStyle]="item.thirdRowRight?.addCssStyle | styleFilter" appDebounceClick
                  (debounceClick)="sub($event,item.thirdRowRight?.submit,item,1,i)">
              </ng-container>
              <ng-template #elseTemplate>
                <img src="assets/fw/add_gray.png" alt="" class="add"
                  [ngStyle]="item.thirdRowRight?.addCssStyle | styleFilter" appDebounceClick
                  (debounceClick)="sub($event,item.thirdRowRight?.submit,item,1,i)">
              </ng-template>

            </div>
            <ng-template #showDelete>
              <div class="delete" [ngStyle]="item.thirdRowRight?.delCssStyle | styleFilter" appDebounceClick
                (debounceClick)="delItem($event, item, i)">
                <p></p>
              </div>
            </ng-template>
          </ng-container>

            <!-- 显示数量 如：x10 -->
            <span *ngIf="item.thirdRowLeft?.thirdText?.label" [ngStyle]="item.thirdRowLeft?.thirdText.cssStyle | styleFilter">{{item.thirdRowLeft?.thirdText.label}}</span>
          </div>
          <div class="o-price-bg">

            <p class="o-price" *ngIf="item.fourthRowLeft">
              <span class="o-unit" *ngIf="item.fourthRowLeft?.firstText?.label"
                [ngStyle]="item.fourthRowLeft.firstText.cssStyle | styleFilter ">{{item.fourthRowLeft.firstText.label}}</span>
              <span *ngIf="item.fourthRowLeft?.secondText?.label && isOpen"
                [ngStyle]="item.fourthRowLeft.secondText.cssStyle | styleFilter ">{{getInterger(item.fourthRowLeft.secondText.label
                - 0 )| currency:'CNY':'':'1.0-0'}}<i class="pirce-digits-o">{{(item.fourthRowLeft.secondText.label - 0 |
                  currency:'CNY':'':'0.2-2') + '' | slice:-3}}</i></span>
              <span *ngIf="item.fourthRowLeft?.secondText?.label && !isOpen"
                [ngStyle]="item.fourthRowLeft.secondText.cssStyle | styleFilter ">***</span>
            </p>
            <span class="o-label" *ngIf="item.fourthRowLeft?.thirdText?.label"
              [ngStyle]="item.fourthRowLeft.thirdText.cssStyle | styleFilter ">{{item.fourthRowLeft.thirdText.label}}</span>


          </div>
        </div>
      </div>
      <!-- 尾部 -->
      <div class="type-bottom" [ngStyle]="item.itemBottomCssStyle | styleFilter"
        *ngIf="(tagData.data.data.length == i+1 ) || (   item.type !== tagData.data.data[i+1].type)">

      </div>
      <span *ngIf="item.fifthRowLeft?.firstText?.label" [ngStyle]="item.fifthRowLeft.firstText.cssStyle | styleFilter">{{item.fifthRowLeft?.firstText?.label}}</span>
    </div>
  </ng-container>


</div>
<div class="noData" *ngIf="(tagData.data.data.length < 1)||( !tagData.data.data)">
  <span>暂无数据</span>
</div>
<ion-infinite-scroll threshold="100px" (ionInfinite)="loadMoreData($event)">
  <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="正在加载更多数据...">
  </ion-infinite-scroll-content>
</ion-infinite-scroll>